<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1成绩查询-班级记录-教师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{/*position: relative; */ height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 50px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 50px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.listWrap{ margin: 10px 0; overflow: hidden; }
.listSelect{ display: block;height: 50px; width: 100%; background:#fff; }
.listSelecValue{ float: left; margin-left: 15px; height: 50px;   line-height: 50px; font-size:15px;  color: #2f2f2f; }
.listSelectBtn{float:right; padding-right: 17px; margin-right: 15px; height: 50px;   line-height: 50px; font-size:15px; color: #d1d1d1; }
.listItems{ display: none; height: 200px; overflow:auto; }
.listItems a{ display: block; padding-left: 15px; height: 40px; line-height: 40px; font-size: 15px;color: #2f2f2f;  }
/*成绩信息内容*/
.genrenchengji,.cj-header{ background:#fff; overflow: hidden; font-size: 14px; }
.genrenchengji *,
.cj-header span{ float:left; width: 20%; height: 38px; line-height: 38px; text-align: center; border-bottom: 1px solid #ecedf0; border-right: 1px solid #ecedf0; }
.genrenchengji span{ color: #666; }
.genrenchengji a{ color: #666; }
.cj-info{ overflow: hidden; display: none; }
.cj-info li{  float: left; width: 20%; }
.cj-info li a{  color: inherit;  }
.cj-info li span{  display: block; width: 100%; height: 38px; line-height: 38px; text-align: center; font-size: 14px;  border-bottom: 1px solid #ecedf0; border-right: 1px solid #ecedf0; }
.cj-info .dk-fen{ color: #666; }
/*模态框*/
.model{display: none; position: absolute;left:0;top:0; height: 100%; width: 100%; background: rgba(0,0,0,0.5) ;}
.model ul{padding:20px; width: 280px; height: 280px; border-radius: 5px; background: #fff;margin:100px auto; overflow-y: auto;}
.model li{ margin:2px 12px; float: left; width: 95px; height: 50px; line-height: 50px; padding-left: 28px;
                 background:url(../img/qx_03.png) left center no-repeat;background-size: 20px; font-size: 15px; }
.model .active{ background:url(../img/xz_03.png) left center no-repeat;background-size: 20px;  }
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 12px 7px; }
.color1{ color: #666 !important; }
.color2{ color: #2e95fc !important; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">班级总成绩排名</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
            	<div class="weui-tab__bd page-wrap" >
                     <div class="listWrap" id="yuekao">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue">2018年01月月考</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a href="###">2018年01月月考</a></li>
                                 <li><a href="###">2018年02月月考</a></li>
                                 <li><a href="###">2018年03月月考</a></li>
                                 <li><a href="###">2018年04月月考</a></li>
                                 <li><a href="###">2018年05月月考</a></li>
                                 <li><a href="###">2018年06月月考</a></li>
                           </ul>
                    </div>
                    <div class="listWrap">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue" id="nji-val">高一(13)班</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a class="nji-btn">高一年级</a></li>
                                 <li><a class="nji-btn">高二年级</a></li>
                                 <li><a class="nji-btn">高三年级</a></li>
                           </ul>
                    </div>
                    <!-- 成绩信息 -->
                    <div class="chengjiWrap">
                            <div class="cj-header">
                                  <span class="color1">姓名</span>
                                  <span>年级排名</span>
                                  <span>班级排名</span>
                                  <span>总成绩</span>
                                  <span>详情</span>
                            </div>
                            <ul id="cj-lists" >
                                     <!-- 使用js渲染数据 -->
                                     <!-- <li>
                                          <div class="genrenchengji">
                                                <a href="5成绩查询-个人成绩-最新考试.html" class="name">范大境</a>
                                                <span class="njipaiming">1</span>
                                                <span class="banjipaiming">3</span>
                                                <span class="zongchengji">620</span>
                                                <a class="geng-btn color2">更多</a>                                 
                                          </div>
                                          <ul class="cj-info">
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">数学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">英语</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">物理</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">化学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">生物</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                          </ul>
                                      </li>
                                      <li>
                                          <div class="genrenchengji">
                                                <a href="5成绩查询-个人成绩-最新考试.html" class="name">范小境</a>
                                                <span class="njipaiming">1</span>
                                                <span class="banjipaiming">3</span>
                                                <span class="zongchengji">620</span>
                                                <a class="geng-btn color2">更多</a>                                 
                                          </div>
                                          <ul class="cj-info">
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">数学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">英语</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">物理</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">化学</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">生物</span></a><span class="dk-fen">89</span></li>
                                                <li><a href="2成绩查询-单科成绩-教师.html"><span class="dk-title">语文</span></a><span class="dk-fen">89</span></li>
                                          </ul>
                                      </li> -->
                            </ul>
                    </div>
            	</div>

                            <!-- 模态框 -->
              <div class="model">
                    <ul>
                          <li class="active">12班</li>
                          <li>13班</li>
                          <li>16班</li>
                          <li>23班</li>
                          <li>30班</li>
                          <li>30班</li>
                          <li>30班</li>
                          <li>30班</li>
                    </ul>
              </div>

        </div>
</div>
</body>
<script>
 (function(){
// 成绩查询列表数据渲染
      var arr = [
            { name:"范小境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"东方", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"东海岛", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ],
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"合肥", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"很反", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
            { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"},
              { name:"范大境", n:1, b:3 ,f:620, k:[["语文",89],["数学",89], ["英语",89], ["物理",89], ["化学",89], ["生物",89], ["语文",89] ], 
              href1:"cheng5.html", href2:"cheng2.html"}
      ];
      var strarr = [];
      $.each(arr, function(i,v){
            var str='';
            $.each(v.k, function(i2,v2){
                  str += '<li><a href="'+v.href2+'"><span class="dk-title">'+v2[0]+'</span></a>'+
                          '<span class="dk-fen">'+v2[1]+'</span></li> ';
            })
            strarr.push(
                   '<li>'+
                        '<div class="genrenchengji">'+
                              '<a href="'+v.href1+'" class="name">'+v.name+'</a>'+
                              '<span class="njipaiming">'+v.n+'</span>'+
                             '<span class="banjipaiming">'+v.b+'</span>'+
                              '<span class="zongchengji">'+v.f+'</span>'+
                              '<a class="geng-btn color2">更多</a>'+                                 
                        '</div>'+
                        '<ul class="cj-info">'+str+'</ul>'+
                    '</li>'
           )
      })
      $("#cj-lists").html( strarr.join(""));

  // 选择项点击下拉效果
       $(".listSelectBtn").click(function(){
                if( $(this).hasClass("g-up")){
                       $(this).removeClass("g-up").addClass("g-down");
                       $(this).parent().next("ul").slideDown();
                }else{
                      $(this).removeClass("g-down").addClass("g-up");
                       $(this).parent().next("ul").slideUp();
                }
       });
       $(".nji-btn").click(function(){
              var str = this.innerHTML;
              var t =this;
              $(".model").show();
              $(".model").find("li").click(function(){
                    $(".model").find("li").removeClass("active");
                    $(this).addClass("active");
                    $("#nji-val").text( str+this.innerHTML );
                    $(".model").hide();
                    $(t).parent().parent().hide();
                    $(t).parent().parent().prev().find(".listSelectBtn").removeClass("g-down").addClass("g-up");
              })
       })

     // 月考选择后
     $("#yuekao").find("li").click(function(){
          $(this).parent().hide();
          $(this).parent().prev().find(".listSelecValue").text( $(this).text() );
          $(this).parent().prev().find(".listSelectBtn").removeClass("g-down").addClass("g-up");
     })

    // 收起展开按钮
    $(".geng-btn").click(function(){
         if( $(this).text() == "更多"){
               $(this).text( "收起" );
               $(this).parent().next("ul").slideDown();
         }else{
                $(this).text( "更多" );
               $(this).parent().next("ul").slideUp();
         }
    })

    // 选择班级模态框
    // var arr2 = [["12班",0] , ["16班",0] ,["10班",0] ,["112班",0] ,["06班",0] ,["08班",0] ,["22班",0] ,["13班",1] ];
    // var str2="";
    // $.each(arr2, function(i,v){
    //     var active='';
    //     if(v[1]==1){ active="active" }
    //     str2 += '<li class="'+active+'">'+v[0]+'</li>';
    // })
    // $(".model").find("ul").html(str2);

 })()

</script>
</html>